<template>
    <div class="app-container"  >
        <el-form :model="queryParams" ref="queryForm" :inline="true" >
           <!-- <el-form-item>
                    <treeselect v-model="queryParams.adCode" :options="xzqhOptions" :normalizer="normalizer"
                        :show-count="true" placeholder="行政区划" @input="stChange"  />
            </el-form-item>-->
            <el-form-item>
                <el-date-picker v-model="queryParams.yy" size="small" value-format="yyyy"
                                type="year" placeholder="请选择（年）" :picker-options="pickerOptions">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="选择测站">
                <el-select v-model="queryParams.statCd" size="small" @change="selectGet" placeholder="请选择测站" >
                    <el-option v-for= "item in stList" :key="item.statNm" :label="item.statNm" :value="item.statCd">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            </el-form-item>
        </el-form>

        <div class="tb_title" >{{stNameTitle}}{{detailTime}}年逐日流量表</div>
        <div class="tb_dw" >单位：<span>m³/d</span></div>
        <div></div>
        <div class="zj_item" v-loading="loading" >
            <div class="item_top_tj" >
                <div class="it_zy" >
                    <div class="iz_num" >{{allycount}}</div>
                    <!-- <div class="iz_wz" >اندازه فیری ایپتفاه مقدار （دفتر ）</div> -->
                    <div class="iz_wz" >年供水天数（天）</div>
                </div>
            </div>
            <div class="item_top_tj" >
                <div class="it_zy" >
                    <div class="iz_num" >{{yavg}}</div>
                    <!-- <div class="iz_wz" >طبیعی دویدن （دفتر ）</div> -->
                    <div class="iz_wz" >年平均日流量（m³/d）</div>
                </div>
            </div>
            <div class="item_top_tj" >
                <div class="it_zy" >
                    <div class="iz_num" >{{ymax}}</div>
                    <!-- <div class="iz_wz" >جۇدا قىلماق خط （دفتر ）</div> -->
                    <div class="iz_wz" >最大日流量（m³/d）/ {{yDatemax}}</div>
                </div>
            </div>
            <div class="item_top_tj" >
                <div class="it_zy" >
                    <div class="iz_num" >{{ymin}}</div>
                    <!-- <div class="iz_wz" >جۇدا قىلماق خط （دفتر ）</div> -->
                    <div class="iz_wz" >最小日流量（m³/d）/ {{yDatemin}}</div>
                </div>
            </div>
        </div>

        <div id="swtable" v-loading="loading" ></div>
       </div>
</template>

<script>
import { listwyllu, getxzqh } from "@/api/measurement/waterstatistics"
import { listStStationB } from "@/api/datam/StStationB"
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
    name: "watermonitor",
    components: { Treeselect },
    dicts: ['sys_chan_level'],
    data() {
        return {
            // 行政区划树选项
            xzqhOptions: [],
            // 遮罩层
            loading: true,
            // 岗位表格数据
            wmList: [],
            stList:[],
            detailTime:'',
            stNameTitle:'',
            // 查询参数
            queryParams: {
                statCd: undefined,
                yy: '',
                stName: undefined
            },
            ymax:0,
            ymin:0,
            yavg:0,
            allycount:0,
            allyv:0,
            yDatemax:'',
            yDatemin:'',
            tableData: [],
            spanArr: [],
            pos: 0,
            pickerOptions:{
                disabledDate(time) {
                    return time.getTime() > Date.now();
                }
            }
        };
    },
    created() {
        let rq = new Date();
        this.queryParams.yy = rq.getFullYear()+"";
        //this.getTreeselect();
        this.getStName();
    },
    mounted () {
       this.loadtable();
    },
    methods: {
        getStName(){
            //this.loading = true;
            listStStationB(this.queryParams).then((response) => {
                let rp = response.rows;
                this.stList = rp;
                this.queryParams.statCd = rp[0].statCd;
                this.selectGet(rp[0].statCd);
                this.getList();
                //this.loading = false;
        });
        },
        stChange(s){
            //改变级联的列表

        },
        //下拉框选中事件
        selectGet(vId){//这个vId也就是value值
            let obj = {};
            obj = this.stList.find((item)=>{//这里的userList就是上面遍历的数据源
                return item.statCd === vId;//筛选出匹配数据
            });
            this.stNameTitle =obj.statNm+'-';
        },
        loadtable(){
            var nrhtml = '<table><tr class="tsback" style="height: 60px;" >'+
                    '   <td>日/月</td>'+
                    '   <td>1月</td>'+
                    '   <td>2月</td>'+
                    '   <td>3月</td>'+
                    '   <td>4月</td>'+
                    '   <td>5月</td>'+
                    '   <td>6月</td>'+
                    '   <td>7月</td>'+
                    '   <td>8月</td>'+
                    '   <td>9月</td>'+
                    '   <td>10月</td>'+
                    '   <td>11月</td>'+
                    '   <td>12月</td>'+
                    '</tr>';
                    for (let i = 1; i <= 31; i++) {
                        nrhtml += '<tr>';

                        nrhtml += '<td class="tsback" >'+i+'</td>';
                        nrhtml +=
                            '   <td id=d01_'+i+'>0</td>'+
                            '   <td id=d02_'+i+'> 0</td>'+
                            '   <td id=d03_'+i+'>0</td>'+
                            '   <td id=d04_'+i+'>0</td>'+
                            '   <td id=d05_'+i+'>0</td>'+
                            '   <td id=d06_'+i+'>0</td>'+
                            '   <td id=d07_'+i+'>0</td>'+
                            '   <td id=d08_'+i+'>0</td>'+
                            '   <td id=d09_'+i+'>0</td>'+
                            '   <td id=d10_'+i+'>0</td>'+
                            '   <td id=d11_'+i+'>0</td>'+
                            '   <td id=d12_'+i+'>0</td>';
                        nrhtml += '</tr>';

                    }

                    nrhtml += '<tr><td class="tsback" >月供水天数</td>';
                    nrhtml +=
                        '<td id="mc1">0</td>'+
                        '   <td id="mc2">0</td>'+
                        '   <td id="mc3">0</td>'+
                        '   <td id="mc4">0</td>'+
                        '   <td id="mc5">0</td>'+
                        '   <td id="mc6">0</td>'+
                        '   <td id="mc7">0</td>'+
                        '   <td id="mc8">0</td>'+
                        '   <td id="mc9">0</td>'+
                        '   <td id="mc10">0</td>'+
                        '   <td id="mc11">0</td>'+
                        '   <td id="mc12">0</td>';
                    nrhtml += '</tr>';

                    nrhtml += '<tr><td class="tsback" >月平均流量</td>';
                    nrhtml +=
                        '<td id="mavg1">0</td>'+
                        '   <td id="mavg2">0</td>'+
                        '   <td id="mavg3">0</td>'+
                        '   <td id="mavg4">0</td>'+
                        '   <td id="mavg5">0</td>'+
                        '   <td id="mavg6">0</td>'+
                        '   <td id="mavg7">0</td>'+
                        '   <td id="mavg8">0</td>'+
                        '   <td id="mavg9">0</td>'+
                        '   <td id="mavg10">0</td>'+
                        '   <td id="mavg11">0</td>'+
                        '   <td id="mavg12">0</td>';
                    nrhtml += '</tr>';

                    nrhtml += '<tr><td class="tsback" >最高日流量</td>';
                    nrhtml += '<td id="mmax1">0</td>'+
                        '   <td id="mmax2">0</td>'+
                        '   <td id="mmax3">0</td>'+
                        '   <td id="mmax4">0</td>'+
                        '   <td id="mmax5">0</td>'+
                        '   <td id="mmax6">0</td>'+
                        '   <td id="mmax7">0</td>'+
                        '   <td id="mmax8">0</td>'+
                        '   <td id="mmax9">0</td>'+
                        '   <td id="mmax10">0</td>'+
                        '   <td id="mmax11">0</td>'+
                        '   <td id="mmax12">0</td>';
                    nrhtml += '</tr>';

                    nrhtml += '<tr><td class="tsback" >发生日期</td>';
                    nrhtml += '<td id="mDatemax1"></td>'+
                        '   <td id="mDatemax2"></td>'+
                        '   <td id="mDatemax3"></td>'+
                        '   <td id="mDatemax4"></td>'+
                        '   <td id="mDatemax5"></td>'+
                        '   <td id="mDatemax6"></td>'+
                        '   <td id="mDatemax7"></td>'+
                        '   <td id="mDatemax8"></td>'+
                        '   <td id="mDatemax9"></td>'+
                        '   <td id="mDatemax10"></td>'+
                        '   <td id="mDatemax11"></td>'+
                        '   <td id="mDatemax12"></td>';
                    nrhtml += '</tr>';

                    nrhtml += '<tr><td class="tsback" >最低日流量</td>';
                    nrhtml += '<td id="mmin1">0</td>'+
                        '   <td id="mmin2">0</td>'+
                        '   <td id="mmin3">0</td>'+
                        '   <td id="mmin4">0</td>'+
                        '   <td id="mmin5">0</td>'+
                        '   <td id="mmin6">0</td>'+
                        '   <td id="mmin7">0</td>'+
                        '   <td id="mmin8">0</td>'+
                        '   <td id="mmin9">0</td>'+
                        '   <td id="mmin10">0</td>'+
                        '   <td id="mmin11">0</td>'+
                        '   <td id="mmin12">0</td>';
                    nrhtml += '</tr>';

                    nrhtml += '<tr><td class="tsback" >发生日期</td>';
                    nrhtml += '<td id="mDatemin1"></td>'+
                        '   <td id="mDatemin2"></td>'+
                        '   <td id="mDatemin3"></td>'+
                        '   <td id="mDatemin4"></td>'+
                        '   <td id="mDatemin5"></td>'+
                        '   <td id="mDatemin6"></td>'+
                        '   <td id="mDatemin7"></td>'+
                        '   <td id="mDatemin8"></td>'+
                        '   <td id="mDatemin9"></td>'+
                        '   <td id="mDatemin10"></td>'+
                        '   <td id="mDatemin11"></td>'+
                        '   <td id="mDatemin12"></td>';
                    nrhtml += '</tr>';

                    nrhtml += '<tr><td class="tsback" rowspan="3" >年度统计</td>';
                    nrhtml += '<td colspan="3" >年总供水天数</td>'+
                        '   <td colspan="3"  id="allycount"></td>'+
                        '   <td colspan="3" >年平均日流量</td>'+
                        '   <td colspan="3"  id="yavg"></td>';
                    nrhtml += '</tr>';

                    nrhtml += '<tr><td colspan="3" >年最大日流量</td>'+
                        '   <td colspan="3" id="ymax"></td>'+
                        '   <td colspan="3" >发生日期</td>'+
                        '   <td colspan="3" id="yDatemax"></td>';
                    nrhtml += '</tr>';

                    nrhtml += '<tr><td colspan="3" >年最小日流量</td>'+
                        '   <td colspan="3" id="ymin"></td>'+
                        '   <td colspan="3" >发生日期</td>'+
                        '   <td colspan="3" id="yDatemin"></td>';
                    nrhtml += '</tr>';


                    nrhtml += '</table>';
            document.getElementById("swtable").innerHTML = nrhtml;
        },
        /** 查询行政区域下拉树结构 */
        getTreeselect() {
            getxzqh().then(response => {
                this.xzqhOptions = this.handleTree(response.data,"adCode","upAdCode");
            });
        },
        dealWithTime(data) {
            let Y = data.getFullYear();
            return Y  ;
        },
        /** 转换菜单数据结构 */
        normalizer(node) {
            if (node.children && !node.children.length) {
                delete node.children;
            }
            return {
                id: node.adCode,
                label: node.adName,
                children: node.children
            };
        },
        /** 查询测站列表 */
        getList() {
            if (this.stNameTitle=="" || this.stNameTitle ==null){
               this.$message.error('请先选择测站');
                return;
            }
            let that=this;
            this.loading = true;
            listwyllu(this.queryParams).then(response => {
                this.loadtable();
                let that=this;
                this.loading = true;
                let alll=response.data.alllist;
                let qtime=''
                if(this.queryParams.yy=='' || this.queryParams.yy == undefined){
                    qtime=new Date();
                    that.detailTime = that.dealWithTime(qtime);
                }else{
                    qtime=this.queryParams.yy;
                    that.detailTime = qtime;
                }

                if(alll){
                    for(let i=0;i<alll.length;i++){
                        document.getElementById("d"+alll[i].statMark).innerText=alll[i].dayLevel
                    }
                    for(let i=1;i<13;i++){
                        document.getElementById("mc"+i).innerText=response.data["l"+i].days
                        document.getElementById("mavg"+i).innerText=response.data["l"+i].mavg
                        document.getElementById("mmax"+i).innerText=response.data["l"+i].mmax
                        document.getElementById("mmin"+i).innerText=response.data["l"+i].mmin
                        document.getElementById("mDatemin"+i).innerText=response.data["l"+i].mDatemin
                        document.getElementById("mDatemax"+i).innerText=response.data["l"+i].mDatemax
                    }



                    //this.wmList = response.data;
                    that.ymax=response.data.ymax;
                    that.ymin=response.data.ymin;
                    that.yavg=response.data.yavg;
                    that.allycount=response.data.allycount;
                    that.allyv=response.data.allyv;
                    that.yDatemax=response.data.yDatemax;
                    that.yDatemin=response.data.yDatemin;
                    document.getElementById("ymax").innerText=that.ymax
                    document.getElementById("ymin").innerText=that.ymin
                    document.getElementById("yavg").innerText=that.yavg
                    document.getElementById("yDatemax").innerText=that.yDatemax
                    document.getElementById("allycount").innerText=that.allycount
                    document.getElementById("yDatemin").innerText=that.yDatemin
                }

                /**数据拆分
                 * */
                this.loading = false;
            });
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },

    }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

    .zj_item{
        width: 100%;
        margin-bottom: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .it_zy{
            display: inline-block;
            text-align: center;
        }
        .item_top_tj{
            display: inline-flex;
            width: 23.5%;
            min-width: 300px;
            padding: 25px 0;
            background: #f7fbfe;
            align-items: center;
            justify-content: center;
        }
        .iz_num{
            font-size: 32px;
            font-weight: 500;
        }
        .iz_wz{
            font-size: 15px;
            color: #8a8b8d;
        }
    }

   ::v-deep #swtable{
        min-width: 600px;
        min-height: 300px;
        margin: 0px auto;
        margin-top: 30px;
        .tsback{
            background: #F8F8F9;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            font-size: 14px;
            table-layout: fixed;
        }

        table, tr, td {
            border: 1px solid #DFE6EC;
        }

        td {
            text-align: center;
            height: 50px;
            position: relative;
        }

        td[class=first] {
            width: 150px;
        }

        td[class=first]:before {
            content: "";
            position: absolute;
            width: 1px;
            height: 152px;
            top: 27px;
            left: 0;
            background-color: #DFE6EC;
            display: block;
            transform: rotate(-78deg);
            transform-origin: top;
            -ms-transform: rotate(-78deg);
            -ms-transform-origin: top;
        }

        td[class=first]:after {
            content: "";
            position: absolute;
            width: 1px;
            height: 114px;
            top: 0;
            left: 55px;
            background-color: #DFE6EC;
            display: block;
            transform: rotate(-58deg);
            transform-origin: top;
            -ms-transform: rotate(-58deg);
            -ms-transform-origin: top;
        }
    }


    .tb_title{
        width: 430px;
        text-align: center;
        margin: 5px auto;
        margin-bottom: 15px;
        font-weight: 600;
    }

    .tb_dw{
        font-size: 13px;
        position: absolute;
        top: 90px;
        right: 40px;
        span{
            color: #349EDF;
        }
    }

    .el-form-item--medium .el-form-item__content {
        line-height: 30px;
    }

    .vue-treeselect__placeholder, .vue-treeselect__single-value {
        line-height: 30px;
    }

    .vue-treeselect {
        width: 215px;
        height: 30px;
        .vue-treeselect__control {
            height: 30px;
            .el-form-item--medium .el-form-item__content {
                line-height: 30px;
                .vue-treeselect__placeholder, .vue-treeselect__single-value {
                    line-height: 30px;
                }
            }
        }
    }

</style>
